 <projecta charset="utf-8">

<div class="box box-primary" id="app_cases_list" style="max-height: 720px;height: 630px;">


    <div class="box-header">
                 <button type="button" class="btn btn-info" style="margin-left: 50px;"  v-on:click="enterEdit()">添加案例</button>
    </div>
    
   	<ul class="q " id="cases_container">
  			
		            	<li v-for="casez in caseList"  style="display: inline;">
						  <div style="display: inline;float: left;margin: 10px;" >
						    <a >
						      <span >
						         <img  v-bind:src="casez.img" width="280px;" height="280px;" />
						      </span>
						    </a>
						    <div  style="width: 270px;">
						      <h3>
						        <a class="" >{{casez.title}}</a>
						      </h3>
						      <div style="width: 260px;margin-top: 5px;">
							      <p style="font-size: 15px;  font-family: 微软雅黑;    font-weight: 400;    font-style: normal;  text-indent: 0em;">
							      {{casez.contentShort}}
							      </p>
						      </div>
						      
						      <div style="width: 90%;margin: 0 auto;"> 
							      <a class="btn btn-danger btn-md" v-on:click="doDelete(casez.id)" >删除</a>
							      <a class="btn btn-info btn-md pull-right"   v-on:click="enterEdit(casez.id)" >编辑</a>
						      </div>
						    </div>
						  </div>
						</li>
				
  				</ul>

<script type="text/javascript">
var caseListz=[
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:3,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:10,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:5,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	{id:1,title:"某某公司品牌xx营销全案",contentShort:"帮助客户组织确定和分析相关的问题，推荐这些问题的解决方案，并且在必要的时候为这些解决方案的",img:"http://image.biaobaiju.com/uploads/20180918/15/1537256494-ZnSKMzEoBI.jpeg"},
	];

var isProd=true;
	new Vue({
	        el: '#app_cases_list',
	        data:  {
	        	caseList:[],
	    	    bus:new Vue()
	     }, 
	     mounted: function(){
	    	 var _this=this;
	    	 _this.renderCase();
	     },
	     methods: {
	    	 doDelete: function(id){
	    		 var url="/met/service/admin/metCmsContent/deleteMetCmsContent";
 	    		zfesAjax.ajaxTodo(url,{"id":id}, function(data){
 	    			alertSwal.successText(data.message);
 	    		})
	    	 },
	    	 enterEdit: function(id){
	    		 var　_this=this;
				  var url="/views/admin/cms/cms.cases.edit.html";
				  zfesLayerEditDg.lookback(url,{"id":id},"案例编辑",860,function(){_this.renderCase();}); 
		  	},
	    	 renderCase: function () {
	        		 var _this=this;
	        		 if(isProd){
	        			 var url="/met/service/pub/metCmsContent/loadMetCmsContentDataSet";
	        			 zfesAjax.ajaxTodo(url,{"cmsType":9}, function(result){
	        				 _this.caseList=result.data.dataSet.rows;
	        				 
	      	    		})
	        		 }else{
	        			 _this.caseList=caseListz;
	        		 }
	        	}
	    }
	});
        


 </script>
</div>